import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Dialogs

ApplicationWindow {
    visible: true
    width: 600
    height: 400
    title: "颜色对话框示例"

    // 存储渐变色的属性
    property color startGradientColor: "red"
    property color endGradientColor: "blue"

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20

        // 标题
        Text {
            text: "ColorDialog 使用示例"
            font.pixelSize: 24
            font.bold: true
            Layout.alignment: Qt.AlignHCenter
        }

        // 基础颜色选择
        Rectangle {
            id: basicRect
            Layout.alignment: Qt.AlignHCenter
            width: 150
            height: 100
            color: "lightblue"
            border.width: 1

            Text {
                anchors.centerIn: parent
                text: "基础颜色选择"
            }

            MouseArea {
                anchors.fill: parent
                onClicked: basicColorDialog.open()
            }
        }

        // 渐变色背景
        Rectangle {
            id: gradientRect
            Layout.alignment: Qt.AlignHCenter
            width: 150
            height: 100
            
            gradient: Gradient {
                GradientStop { 
                    position: 0.0
                    id: gradientStart
                }
                GradientStop { 
                    position: 1.0
                    id: gradientEnd
                }
            }

            // 使用 Binding 来绑定颜色
            Binding {
                target: gradientStart
                property: "color"
                value: startGradientColor
            }

            Binding {
                target: gradientEnd
                property: "color"
                value: endGradientColor
            }

            Text {
                anchors.centerIn: parent
                text: "渐变色选择"
                color: "white"
            }

            RowLayout {
                anchors.top: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                spacing: 10

                Button {
                    text: "起始色"
                    onClicked: startColorDialog.open()
                }

                Button {
                    text: "结束色"
                    onClicked: endColorDialog.open()
                }
            }
        }
    }

    // 基础颜色对话框
    ColorDialog {
        id: basicColorDialog
        title: "选择基础颜色"
        selectedColor: basicRect.color
        onAccepted: {
            basicRect.color = selectedColor
        }
    }

    // 渐变起始色对话框
    ColorDialog {
        id: startColorDialog
        title: "选择渐变起始色"
        selectedColor: startGradientColor
        onAccepted: {
            startGradientColor = selectedColor
        }
    }

    // 渐变结束色对话框
    ColorDialog {
        id: endColorDialog
        title: "选择渐变结束色"
        selectedColor: endGradientColor
        onAccepted: {
            endGradientColor = selectedColor
        }
    }
}
